<template>
    <mt-search class="mainDiv mySearch" v-model="name" cancel-text="取消"  placeholder="搜索" :show=true>
      <div  v-infinite-scroll="loadMore" infinite-scroll-disabled="disableLoading" infinite-scroll-distance="10" style="padding-top: 5px">
        <mt-cell class="cell" v-for="cell in schoolPage.data" is-link :to="'/college/college/'+cell.id">
          <span slot="title" class="cellTitle">
                <div class="cellName">{{cell.name}}</div>
                <div class="cellLabel">
                  <span>{{cell.sheng}}</span><span>{{cell.is985}}</span><span>{{cell.is211}}</span><span>{{cell.level}}</span>
                </div>
          </span>
          <img slot="icon" v-bind:src="'/'+cell.logo" width="50" height="50">
        </mt-cell>
      </div>
    </mt-search>
</template>

<script>
    export default {
        name: "collegeList",
      data() {
        return {
          name:"",
          disableLoading: false,
          schoolPage:{pageIndex:-1,data:[]}
          // ...
        };
      },
      methods: {
        loadMore:function(){
          this.disableLoading = true;
          let vm = this;
          this.$http.get("/wx/querySchool",{params:{pageIndex:this.schoolPage.pageIndex+1,name:this.name}}).then((resp)=>{
             vm.schoolPage.pageIndex = resp.data.pageIndex;
             vm.schoolPage.pageTotal = resp.data.pageTotal;
             vm.schoolPage.data.push.apply(vm.schoolPage.data, resp.data.data);
             if(resp.data.pageIndex +1 != resp.data.pageTotal){
               vm.disableLoading = false;
             }
          })
        },
      },
      watch: {
        name: function (val, oldVal) {
          this.schoolPage={pageIndex:-1,data:[]}
          this.loadMore();
          console.log(val);
        }
      }
    }
</script>

<style>
  .mySearch .mint-searchbar-inner .mintui-search{
    font-size: 18px;
  }
</style>
<style scoped>
  .cell{
    min-height:66px;
  }
  .cellTitle{
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
  }
  .cellName{
    font-size: 18px;
    line-height: 30px;
  }
  .cellLabel{
    color:lightskyblue;
  }
  .cellLabel span{
    padding-right: 5px;
  }
  .mainDiv{
   max-height: 100%;
    overflow-y: auto;
  }


</style>
